<template>
	<view v-if="props.title" class="title">
		<text>{{ props.title }}</text>
	</view>
	<view
		class="header-box"
		@click="userFn(v)"
		v-for="v in List.user"
		:key="v"
	>
		<view class="header">
			<view class="header-content">
				<view class="personal-information">
					<text>{{ v.name }}</text>
					<view>
						<text>{{ v.status == 0 ? '住院中' : '已出院' }}</text>
					</view>
				</view>
				<view class="information">
					<text>住院号</text>
					<text>{{ v.inpatientNum }}</text>
				</view>
				<view class="information">
					<text>就诊卡号</text>
					<text>{{ v.visitNum }}</text>
				</view>
				<view class="information">
					<text>入院时间</text>
					<text>{{ v.inHospitalTime }}</text>
				</view>
				<view class="information">
					<text>出院时间</text>
					<text>{{ v.leaveHospitalTime }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
let props = defineProps(['title', 'clickFn'])
import {useLoginStore} from '@/store/loginStore'
import { InpatientInformationQueryApi } from '@/api/ViewServices'
import { onMounted, reactive } from 'vue'
const store=useLoginStore()

let List = reactive({
	user: ''
})
onMounted(() => {
	InpatientInformationQueryApi({ userId: store.id }).then(({ data }) => {
		List.user = data.data
	})
})
let userFn=(v)=>{
	props.clickFn&&props.clickFn(v)
}
</script>

<style scoped lang="less">
.title {
	margin: 56rpx 0 0 30rpx;
	font-size: 30rpx;
}
.header-box {
	width: 750rpx;
	height: 400rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header {
	width: 688rpx;
	height: 340rpx;
	border-radius: 10rpx;
	background: #f3f8fe;
	display: flex;
	justify-content: center;
	align-items: center;

	.header-content {
		width: 630rpx;
		height: 252rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.personal-information {
			width: 630rpx;
			height: 44rpx;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			color: #474848;

			view {
				width: 114rpx;
				height: 40rpx;
				background-color: #c4eee5;
				border-radius: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					font-size: 24rpx;
					color: #03ca82;
				}
			}
		}

		.information text:nth-child(1) {
			font-size: 24rpx;
			color: #bbbcbd;
		}
		.information text:nth-child(2) {
			font-size: 24rpx;
			margin-left: 20rpx;
		}
	}
}
</style>
